<template>
  <section class="set-container" v-cloak>
    <el-row class="search-box">
      <el-col :span="24">
        <label for="" class="choose">
          <span class="marginRight10">缴费日期</span>
          <el-date-picker
            v-model="dateTime"
            type="daterange"
            size="small"
            placeholder="选择日期范围"
            :picker-options="dateOptions">
          </el-date-picker>
        </label>
        <label for="" class="choose">
          <span class="marginRight10">姓名</span>
          <el-input placeholder="姓名" size="small" class="search-input" v-model="socialCompanyName">
          </el-input>
        </label>
        <label for="" class="choose">
          <el-button type="primary" size="small" @click="search" style="width:80px">筛选</el-button>
        </label>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" class="export">
      <div class="data-t">
        <span>总缴费笔数：{{ countInfo.payNum }}</span>
        <span style="margin-left: 18px;">总缴费金额：{{ countInfo.payAmount | currency }}元</span>
        <span style="margin-left: 18px;">总手续费总额：{{ countInfo.factorage | currency }}元</span>
      </div>
      <el-button icon="self-daochu" size="small" @click="exportData" class="blue">导出全部</el-button>
    </el-row>
    <el-row class="data-list">
      <ctable :thead="thead" :table-data="lists" :options="options" :page-data="pageObj" :opt-width="80" all-align="center" :serial="true"></ctable>
    </el-row>
  </section>
</template>

<script>
import {statementList, countSocialStatement} from 'api/social/statement/index'
import ctable from 'components/common/ctable'
import { currency, getDayInitTime } from 'src/filter/index'
export default {
  data () {
    let startDate = new Date().getTime() - 7 * 24 * 3600 * 1000
    let endDate = new Date().getTime() - 24 * 3600 * 1000
    return {
      startTime: 0, // 开始时间
      endTime: 0, // 结束时间
      dateTime: [new Date(startDate), new Date(endDate)], // 缴费日期
      lists: [], // 数据列表,
      thead: [{ // ctable组件头
        name: '姓名',
        prop: 'socialCompanyName'
      }, {
        name: '缴费笔数',
        prop: 'payNum'
      }, {
        name: '缴费金额',
        prop: 'payAmount',
        format: this.priceFilter
      }, {
        name: '手续费',
        prop: 'factorage',
        format: this.priceFilter
      }, {
        name: '支付总额',
        prop: 'totalPayAmount',
        format: this.priceFilter
      }],
      options: [{
        name: '查看详情',
        callback: this.toDetail
      }],
      pageObj: { // 分页
        page: {},
        callback: this.getData
      },
      dateOptions: { // 时间组件参数
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      socialCompanyName: '', // 缴费单位名称
      countInfo: {}, // 统计信息
      methodsType: 1 // 统计方式
    }
  },
  created () {
    this.getData(1)
  },
  components: {
    ctable
  },
  methods: {
    getData (int) { // 获取数据
      this.startTime = getDayInitTime(this.dateTime[0], 1) / 1000
      this.endTime = getDayInitTime(this.dateTime[1], 2) / 1000
      // 获取统计信息
      countSocialStatement({
        startTime: this.startTime,
        endTime: this.endTime,
        socialCompanyName: this.socialCompanyName
      }).then(res => {
        this.countInfo = res.data
      })
      // 获取数据列表
      statementList({
        page: int,
        count: 15,
        startTime: this.startTime,
        endTime: this.endTime,
        socialCompanyName: this.socialCompanyName
      }).then(res => {
        this.lists = res.data || []
        this.pageObj.page = res.page
      })
    },
    toDetail (obj) {
      this.$router.push({name: 'settlementDetail', query: { socialCompanyName: obj.socialCompanyName, startTime: this.startTime, endTime: this.endTime }})
    },
    priceFilter (row, col, value) {
      return currency(value)
    },
    search () {
      this.getData(1)
    },
    exportData () {
      // let loginKey = window.localStorage.loginKey
      window.open(`/net/socialadmin/social_statement/exports-list?startTime=${this.startTime}&endTime=${this.endTime}&socialCompanyName=${this.socialCompanyName}`)
    }
  }
}
</script>
<style lang="less" scoped>
.set-container {
  padding: 15px 25px 0;
  .data-t {
    color: #20a0ff;
  }
  .search-input{
    width: 20%;
    margin-right: 40px;
  }
  .marginRight10{
    margin-right: 10px;
  }
  .search-box {
    padding: 25px 0 25px 25px;
    border: 1px solid #d3dce6;
  }
  .choose {
    margin-right: 20px;
    .select-box {
      width: 120px;
    }
    .year-box {
      width: 150px;
    }
  }
  .export {
    margin-top: 10px;
  }
}
</style>

